<template>
  <p-card :bordered="false" class="container">

    <p-checkbox-group v-model="data.property" @change="onChange" style="width: 100%">
      <p-row>
        <p-col :span="3"  v-for="(item, index) in checkboxData" :key="index">
          <p-checkbox :value="item.val">
            {{item.text}}
          </p-checkbox>
        </p-col>
      </p-row>
    </p-checkbox-group>    

      <!-- <p-form-model 
        class="container-sop"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-item label="sop模板" :labelCol="labelCol"  :wrapperCol="{span: 6}">
          <p-select v-model="data.sopTemplate" style="width: 220px">
            <p-select-option :value="item.value" v-for="(item, index) in sopTemplateArr" :key="index">
              {{item.text}}
            </p-select-option>
          </p-select>
        </p-form-item>   
      </p-form-model> -->
    <div class="container-btn">
      <p-button @click="handleAdd" type="primary" icon="plus">提交</p-button>
    </div>

  </p-card>

</template>

<script type="text/javascript">
import JDictSelectTag from "@/components/dict/JDictSelectTag";
import { postAction,getAction,deleteAction, putAction } from '@/api/manage';
import { ajaxGetDictItems } from '@/api/api'
export default {
  props: {
    mesPeProcessProperty: {
      type: Object
    },
    selectedProcessmcode: {
      type: String
    },
    mesPeProcessId: {
      type: String
    }
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      checkboxData: [
        {
          val: 'skill',
          text: '技能',
        },
        {
          val: 'resource',
          text: '资源',
        },
        {
          val: 'processbom',
          text: '工序BOM',
        },
        {
          val: 'sop',
          text: 'SOP',
        },
        {
          val: 'wirerod',
          text: '线材清单',
        },
        {
          val: 'module',
          text: '组件清单',
        },
        {
          val: 'consume',
          text: '耗损系数',
        },
        {
          val: 'gram',
          text: '程序',
        },
        {
          val: 'electrostatic',
          text: '静电标识',
        },
      ],
      data: {
        property: [],
      },
      sopTemplateArr: [],
      other: '',
      form: {
        name: '',
      },
      rules: {
        sopTemplateSelectChange: [{ required: true, message: '请选择sop模板', trigger: 'change' }],
      },
      url: {
        edit: '/mes-craft/craft/mesPeDefinition/edit',
        info: '/mes-craft/craft/mesPeDefinition/queryByDefinitionId',
      }
    }
  },
  watch: {
    mesPeProcessId (newVal, oldVal) {
      this.getInfo()
    }
  },
  mounted() {
    this.getSopTemplateArr()
  },
  methods: {
    getInfo(){
      const params = {
        id: this.mesPeProcessId
      }
      getAction(this.url.info, params).then( res => {
        if (res.success) {
          this.data.property.splice(0, this.data.property.length)
          this.checkboxData.forEach( ({val}) => {
            if (res.data[val] == 1 ) {
              this.data.property.push(val)
            }
          }) 
        }
      } )
    },
    getSopTemplateArr(){
      ajaxGetDictItems('mes_sop_model').then( res => {
        console.log('res', res);
        
        this.sopTemplateArr = res.data
      } )
    },
    onChange(val){
      console.log(val);
    },
    handleAdd(){
      const params = {};
      this.checkboxData.forEach( ({val}) => {
          params[val] = this.data.property.includes(val) ?  1 : 2
      } )
      params.id = this.mesPeProcessId
      putAction(this.url.edit, params).then( res => {
        if (res.success) {
          this.$message.success('处理完成!')
        } else {
          this.$message.warning('处理失败!')
        }          
      } )
    },
  },
  components: {
    JDictSelectTag
  }
}
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';
  .container {
    height: 400px;
  }
  .container-btn {
    // text-align: center;
    padding-top: 10px;
  }
  .ant-btn, .poros-btn{
    padding-left: 10px;
    padding-right: 10px;
  }
  .container-sop {
    margin-top: 24px;
  }
</style>
